<template>
    <div class="goodsInfo-container" >

       <transition
        @before-enter="beforeEnter"
        @enter="enter"
        @after-enter="afterEnter">
           <div class="ball" v-show="ballFlag" ref="ball"></div>
       </transition>

<!--       商品轮播图区域-->
        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <swiper :lun-list="Goodslunbo" :isfull="false"/>
                </div>
            </div>
        </div>
<!--        商品购买区域-->
        <div class="mui-card">
            <div class="mui-card-header">{{goodsinfo.title}}</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                   <p class="price">
                       市场价:<del>￥{{goodsinfo.market_price}}</del>&nbsp;&nbsp;
                       销售价:<span class="now_price">￥{{goodsinfo.sell_price}}</span>
                   </p>
                    <p>购买数量:<numbox @getcount="getSelectedCount" :max="goodsinfo.stock_quantity"/></p>
                    <p>
                        <mt-button type="primary" size="small">立即购买</mt-button>
                        <mt-button type="danger" size="small" @click="addToShopCart">加入购物车</mt-button>
                    </p>
                </div>
            </div>
        </div>
<!--        商品参数区域-->
        <div class="mui-card">
            <div class="mui-card-header">商品参数</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p>商品货号:{{goodsinfo.goods_no}}</p>
                    <p>库存情况:{{goodsinfo.stock_quantity}}件</p>
                    <p>上线时间:{{goodsinfo.add_time | dateFormat}}</p>
                </div>
            </div>
            <div class="mui-card-footer">
                <mt-button type="primary" size="large" plain @click="goDesc(id)">图文介绍</mt-button>
                <mt-button type="danger" size="large" plain @click="goComment(id)">商品评论</mt-button>
            </div>
        </div>

    </div>
</template>

<script>
    //导入轮播图组件
    import swiper from "../subcomponents/swiper.vue";
    // 导入 数字选择框 组件
    import numbox from "../subcomponents/goodsinfo_numbox.vue";

    export default {
        name: "GoodsInfo",
        data(){
            return{
                id:this.$route.params.id, //将路由参数对象的id挂载到data，方便后期调用
                Goodslunbo:[],  //轮播图的数据
                goodsinfo:{}, //商品信息数据
                ballFlag:false , //控制小球的显示和隐藏
                selectedCount:1 //保存用户选中的商品数量，默认为1
            }
        },
        created() {
            this.getGoodslun();
            this.getGoodsInfo();
        },
        methods:{
            getGoodslun(){
                this.$http.get('api/getthumimages/'+this.id).then(result=>{
                    if(result.body.status===0){
                        // 先循环轮播图数组的每一项，为item添加img属性
                        result.body.message.forEach(item =>{
                            item.img=item.src;
                        });
                        this.Goodslunbo=result.body.message;
                    }
                })
            },
            getGoodsInfo(){  //获取商品信息
                this.$http.get('api/goods/getinfo/'+this.id).then(result=>{
                    if(result.body.status===0){
                        this.goodsinfo=result.body.message[0];
                    }
                })

            },
            goDesc(id){  //点击使用编程式导航跳转到图文介绍里面
                this.$router.push({name:'goodsdesc',params:{ id } });
            },
            goComment(id){//点击跳转到评论页面
                this.$router.push({name:'goodscomment',params:{ id } });
            },
            addToShopCart(){ //添加到购物车
                this.ballFlag=!this.ballFlag;
                //{ id: 商品的id ，count :要购买的数量，price：商品的单价 ，selected：false}
                var  goodsinfo = {
                    id: this.id,
                    count: this.selectedCount,
                    price: this.goodsinfo.sell_price,
                    selected: true
                };

                this.$store.commit('addToCart',goodsinfo);


            },
            beforeEnter(el){
                el.style.transform="translate(0,0)";
            } ,
            enter(el,done){
                el.offsetWidth;
                const ballPosition=this.$refs.ball.getBoundingClientRect();    //获取小球位置
                const badgePosition=document.getElementById('badge').getBoundingClientRect();    //获取徽标位置

                const xDist=badgePosition.left-ballPosition.left;
                const yDist=badgePosition.top-ballPosition.top;

                el.style.transform = `translate(${xDist}px, ${yDist}px)`;
                el.style.transition="all 0.5s cubic-bezier(.43,-0.16,.43,.95)";
                done();
            },
            afterEnter(el){
                this.ballFlag=!this.ballFlag;
            },
            getSelectedCount(count){
                //当子组件把，选中的数量传递给父组件的时候，把选中的值保存到data上
                this.selectedCount=count;

            }

        },
        components:{
            swiper,
            numbox
        }
    }
</script>

<style lang="scss" scoped>
      .goodsInfo-container {
          background-color: #eee;
          overflow: hidden;

          .now_price {
              color: red;
              font-size: 16px;
              font-weight: 600;
          }
          .mui-card-footer {
              display: block;
              button {
                  margin: 15px 0;
              }
          }
          .ball{
              width: 15px;
              height: 15px;
              border-radius: 50%;
              background-color: red;
              position: absolute;
              z-index: 100;
              left: 137px;
              top: 440px;
          }
      }
</style>